<template>
	<view class="main">
		<view class="collection">
			<!-- <u-skeleton rows="2" titleWidth="100%" titleHeight="150" :loading="loading" > -->
			<block v-for="item in special_list" :key="item.id">
				<view class="item" @tap="toPage(`/subpage/Product/details?id=${item.id}`)">
					<view class="img">
						<image :src="item.thumb" mode="aspectFill"></image>
						<view class="status" :class="{next:item.show}"
							v-if="item.show||item.all_count==item.sale_count">
							<u-icon name="clock"></u-icon>
							<text v-if="item.show">即将开售</text>
							<text v-if="!item.show&&(item.all_count==item.sale_count)">已售罄</text>
							<u-count-down v-if="item.show" @finish="onFinish(item.id)" :time="item.time"
								format="HH:mm:ss"></u-count-down>
						</view>
					</view>
					<view class="item_cont">
						<view class="title u-line-1">{{item.title}}</view>
						<view class="tags">
							<text style="margin-right: 0;">限量:</text>
							<text>{{item.all_count}}份</text>
							<block v-for="(iitem,index) in item.label" :key="index">
								<text>{{iitem}}</text>
							</block>

						</view>
						<view class="btm">
							<view class="user">
								<u-avatar size="20" :src="item.portrait"></u-avatar>
								<text>{{item.user_name}}</text>
							</view>
							<view class="price">¥ {{item.base_price}}</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="!loading&&special_list.length<1">
				<Empty text="暂无藏品"></Empty>
			</block>
			<!-- </u-skeleton> -->
		</view>
	</view>
</template>

<script>
	import Empty from "@/components/Empty.vue"
	import {
		mixin
	} from '@/Mixins/mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				show: false,
				loading: false,
				special_list: [],
				page: 1,
				size: 10,
				total: 0,
				loading: false
			}
		},
		components: {
			Empty
		},
		onReady() {},
		onLoad() {
			this.List();
		},
		methods: {
			chaishop() {
				this.show = false;
				setTimeout(() => {
					this.show = true;
				}, 100)

			},
			async List() {
				let data = await this.$http({
					url: this.$api.firstpay,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						page: this.page,
						page_size: this.size,
					}
				})
				this.loading = true
				console.log('[列表]', data)
				if (data.code == 200) {
					if (this.page == 1) {
						this.special_list = [];
						this.special_list = data.data.list.data;
						this.special_list.map((el) => {
							if (el.label) {
								el.label = JSON.parse(el.label);
							} else {
								el.label = [];
							}
						})
					}
					this.total = data.data.list.total
					console.log(data.data.list.total);
					if (this.special_list.length < data.data.total) {
						this.special_list = this.special_list.concat(data.data.list.data)
						this.special_list.map((el) => {
							if (el.label) {
								el.label = JSON.parse(el.label);
							} else {
								el.label = [];
							}
						})
						this.page += 1
					}
				}
			},
			exchangecdk() {
				this.show = true;
			},

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		min-height: 100vh;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: $nft-bg-color;

		.collection {
			padding-top: 30rpx;

			.item {
				background: #2C2C2D url(@/static/images/shopbg.png)right bottom no-repeat;
				background-size: 300rpx 300rpx;
				border-radius: 60rpx;
				overflow: hidden;
				margin-bottom: 30rpx;

				.img {
					position: relative;

					image {
						width: 100%;
						height: 666rpx;
						border-radius: 60rpx;
					}

					.status {
						display: flex;
						align-items: center;
						position: absolute;
						left: 34rpx;
						top: 48rpx;
						padding: 8rpx 12rpx;
						background: #141516;
						border-radius: 19rpx;
						font-size: 24rpx;
						font-weight: 600;
						color: #8F8F8F;

						text {
							margin-left: 12rpx;
						}

						&.next {
							color: #F3E0BC;

							::v-deep .u-icon__icon {
								color: #F3E0BC !important;
							}

							::v-deep .u-count-down__text {
								font-size: 24rpx;
								font-weight: 600;
								color: #F3E0BC;
							}

						}
					}
				}

				.item_cont {
					border-radius: 0 0 60rpx 60rpx;
					padding: 12rpx 42rpx 30rpx 28rpx;

					.title {
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 46rpx;
					}

					.tags {
						text {
							padding: 4rpx 14rpx;
							font-size: 24rpx;
							font-weight: 600;
							color: #F3E0BC;
							background: #4B4B4C;
							margin: 0 10rpx 10rpx 0;

							&:nth-child(1) {
								background-color: #FFBA6B;
								margin-right: 0;
								color: #333333;
							}
						}
					}

					.btm {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 22rpx;

						.user {
							display: flex;
							align-items: center;

							text {
								margin-left: 12rpx;
								font-size: 24rpx;
								font-weight: 400;
								color: #959696;
							}
						}

						.price {
							font-size: 40rpx;
							font-weight: 900;
							color: #FFFFFF;
							line-height: 56rpx;
						}
					}
				}
			}
		}
	}
</style>
